<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言详情</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f7fa;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .post-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            background: linear-gradient(135deg, #f6f9fc, #eef2f5);
        }

        .post-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #1a73e8;
        }

        .post-content {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .post-image {
            max-width: 100px;
            max-height: 100px;
            margin-top: 10px;
            border-radius: 4px;
        }

        .comments-section {
            padding: 20px;
        }

        .comment {
            margin-bottom: 20px;
            border-radius: 6px;
            background: white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .comment-main {
            padding: 15px;
            border-left: 3px solid #1a73e8;
        }

        .comment-reply {
            margin-left: 40px;
            margin-top: 15px;
            border-left: 3px solid #34a853;
            background-color: #f8f9fa;
        }

        .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
            object-fit: cover;
        }

        .user-name {
            font-weight: bold;
            color: #3c4043;
        }

        .comment-time {
            font-size: 12px;
            color: #70757a;
            margin-left: 10px;
        }

        .comment-content {
            margin: 10px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
            line-height: 1.6;
        }

        .comment-images img {
            max-width: 50px;
            max-height: 50px;
            margin-right: 10px;
            margin-top: 10px;
            border-radius: 4px;
        }

        .reply-label {
            display: inline-block;
            background: #e6f4ea;
            color: #34a853;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-bottom: 8px;
        }

        .parent-comment {
            background: #f1f3f4;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 10px;
            border-left: 2px solid #dadce0;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 帖子信息 -->
        <div class="post-header">
            <div class="post-title">{$row.post.name}</div>
            {if $row.post.image}
            <img src="{$row.post.image}" class="post-image" alt="帖子图片">
            {/if}
            <div class="post-content">
                {$row.post.content}
            </div>
        </div>

        <!-- 留言列表 -->
        <div class="comments-section">
            <div class="comment">
                <!-- 主留言 -->
                <div class="comment-main">
                    <div class="user-info">
                        <img src="{$row.user.avatar}" class="user-avatar" alt="用户头像">
                        <span class="user-name">{$row.user.nickname}</span>
                        <span class="comment-time">{:date('Y-m-d H:i:s', $row.createtime)}</span>
                    </div>
                    <div class="comment-content">
                        {$row.content}
                    </div>
                    <div class="comment-images">
                        {foreach $row.images as $image}
                        <img src="{$image}" alt="留言图片">
                        {/foreach}
                    </div>
                </div>
            </div>

            <!-- 如果是回复留言，显示父级留言 -->
            {if $row.pid > 0 && isset($row.parent)}
            <div class="comment-reply">
                <span class="reply-label">回复</span>
                <div class="parent-comment">
                    <div class="user-info">
                        <img src="{$row.parent.user.avatar}" class="user-avatar" alt="用户头像">
                        <span class="user-name">{$row.parent.user.nickname}</span>
                        <span class="comment-time">{:date('Y-m-d H:i:s', $row.parent.createtime)}</span>
                    </div>
                    <div class="comment-content">
                        {$row.parent.content}
                    </div>
                    <div class="comment-images">
                        {foreach $row.parent.images as $pimage}
                        <img src="{$pimage}" alt="留言图片">
                        {/foreach}
                    </div>
                </div>
            </div>
            {/if}
        </div>
    </div>
    </div>
</body>

</html>